<template>
  <div class="news-list bg-c-fff pb70">
    <div class="fix container pt30">
      <div class="flo-left news-list-left">
        <p class="dh"><a href="#/">首页</a> > <a href="#/news-list">网站公告</a> > <span class="now"> 文章详情</span> </p>
        <div class="news-text">
          <h2>{{title}}</h2>
          <div class="time-box">
            <div class="dib">
              <i class="iconfont icon-yanjing vs"></i>
              <span>阅读：22</span>
            </div>
            <div class="dib">
              <i class="iconfont icon-shijian1 vm"></i>
              <span>时间：{{time}}</span>
            </div>
          </div>
          <div class="con" v-html="content"></div>
        </div>
      </div>
      <div class="flo-right news-list-right">
        <form action="">
          <input type="text">
          <input type="button" value="搜索">
        </form>
        <h2 class="fix">网站公告<a href="" class="flo-right">更多</a></h2>
        <ul>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
        </ul>
        <h2 class="fix help">帮助中心<a href="" class="flo-right">更多</a></h2>
        <ul>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
          <li class="fix">
            <a href="" class="flo-left db text-ovh">2017年度运营报告及详细...</a>
            <span class="flo-right db">2017-03-24</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      title: '',
      time: '',
      content: ''
    }
  },
  mounted() {
    this.$http.get('/sysContent/detail/' + this.$route.query.id, {
      params: {
        id: this.$route.query.id
      }
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.title = data.data.data.title
        this.time = data.data.data.createTime
        this.content = data.data.data.content
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  }
}

</script>
<style type="text/css" scoped>
.pt30 {
  padding-top: 30px;
}

.news-list-left {
  width: 850px;
}

.dh a {
  color: #a6a6a6
}

.dh a.now {
  color: #454545;
}

.news-text {
  margin-top: 30px;
}

.news-text h2 {
  line-height: 55px;
  font-size: 30px;
}

.news-text .con {
  width: 850px;
  margin-top: 20px;
  font-size: 16px;
  color: #707070;
  line-height: 30px;
  text-indent: 32px;
}

.time-box {
  color: #909090;
  margin-top: 18px;
  font-size: 12px;
}

.time-box .dib {
  margin-right: 15px;
}

.time-box .dib .icon-yanjing {
  font-size: 22px;
}

.news-list-right {
  width: 300px;
  padding: 20px;
  margin-top: 20px;
  background-color: #f5f5f5;
}

.news-list-right input {
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

.news-list-right input[type='text'] {
  width: 200px;
  border: 1px solid #e5e6e7;
  margin-right: 6px;
  padding: 0 5px;
}

.news-list-right input[type='button'] {
  width: 50px;
  background-color: #fff;
  border: 1px solid #e60012;
}

.news-list-right h2 {
  border-left: 3px solid #e60012;
  padding-left: 15px;
  line-height: 20px;
  margin-top: 40px;
  color: #e60012;
}

.news-list-right h2.help {
  border-color: #01378c;
  color: #01378c;
}

.news-list-right h2 a {
  font-size: 14px;
  color: #909090;
}

.news-list-right ul li {
  line-height: 45px;
  color: #7e7e7e;
}

.news-list-right ul {
  margin-top: 24px;
}

.news-list-right ul li a {
  width: 180px;
  color: #7e7e7e;
}

.news-list-right ul li a:hover {
  color: #3f5d9c;
}

</style>
